import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, StyleSheet, ScrollView, Platform, Alert } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useRouter } from 'expo-router';
import { theme } from '../../theme';

export default function BuildingCollectScreen() {
  const router = useRouter();
  const [formData, setFormData] = useState({
    buildingName: '',
    address: '',
    floors: '',
    buildYear: '',
    buildingType: '',
    propertyCompany: '',
    contactPerson: '',
    contactPhone: '',
    notes: ''
  });

  const handleChange = (field: string, value: string) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }));
  };

 
  const validateForm = () => {
    const requiredFields = [
      { field: 'buildingName', label: '楼房名称' },
      { field: 'address', label: '详细地址' },
      { field: 'buildingType', label: '建筑类型' },
      { field: 'contactPerson', label: '联系人' },
      { field: 'contactPhone', label: '联系电话' }
    ];

    const emptyFields = requiredFields.filter(({ field }) => !formData[field]);

    if (emptyFields.length > 0) {
      const emptyFieldLabels = emptyFields.map(({ label }) => label).join('、');
      Alert.alert(
        '提示',
        `请填写以下必填信息：${emptyFieldLabels}`,
        [{ text: '确定' }]
      );
      return false;
    }

    return true;
  };

  const handleSubmit = () => {
    if (!validateForm()) return;

    // 在实际应用中，这里会提交数据到服务器
    console.log('提交数据:', formData);
    // 提交成功后返回上一页
    router.back();
  };

  const renderRequiredMark = () => (
    <Text style={styles.requiredMark}>*</Text>
  );

  return (
    <ScrollView style={styles.container}>
      <View style={styles.header}>
        <TouchableOpacity style={styles.backButton} onPress={() => router.back()}>
          <Ionicons name="arrow-back" size={24} color="#fff" />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>楼房信息采集</Text>
        <View style={styles.placeholder} />
      </View>

      <View style={styles.formContainer}>
        <View style={styles.formGroup}>
          <View style={styles.labelContainer}>
            <Text style={styles.label}>楼房名称</Text>
            {renderRequiredMark()}
          </View>
          <TextInput
            style={styles.input}
            placeholder="请输入楼房名称"
            value={formData.buildingName}
            onChangeText={(value) => handleChange('buildingName', value)}
          />
        </View>

        <View style={styles.formGroup}>
          <View style={styles.labelContainer}>
            <Text style={styles.label}>详细地址</Text>
            {renderRequiredMark()}
          </View>
          <TextInput
            style={styles.input}
            placeholder="请输入详细地址"
            value={formData.address}
            onChangeText={(value) => handleChange('address', value)}
          />
        </View>

        <View style={styles.formRow}>
          <View style={[styles.formGroup, styles.halfWidth]}>
            <Text style={styles.label}>楼层数</Text>
            <TextInput
              style={styles.input}
              placeholder="请输入楼层数"
              keyboardType="numeric"
              value={formData.floors}
              onChangeText={(value) => handleChange('floors', value)}
            />
          </View>
          <View style={[styles.formGroup, styles.halfWidth]}>
            <Text style={styles.label}>建造年份</Text>
            <TextInput
              style={styles.input}
              placeholder="请输入年份"
              keyboardType="numeric"
              value={formData.buildYear}
              onChangeText={(value) => handleChange('buildYear', value)}
            />
          </View>
        </View>

        <View style={styles.formGroup}>
          <View style={styles.labelContainer}>
            <Text style={styles.label}>建筑类型</Text>
            {renderRequiredMark()}
          </View>
          <View style={styles.typeContainer}>
            {['住宅', '商业', '办公', '混合'].map((type) => (
              <TouchableOpacity
                key={type}
                style={[
                  styles.typeButton,
                  formData.buildingType === type && styles.typeButtonActive
                ]}
                onPress={() => handleChange('buildingType', type)}
              >
                <Text style={[
                  styles.typeButtonText,
                  formData.buildingType === type && styles.typeButtonTextActive
                ]}>{type}</Text>
              </TouchableOpacity>
            ))}
          </View>
        </View>

        <View style={styles.formGroup}>
          <Text style={styles.label}>物业公司</Text>
          <TextInput
            style={styles.input}
            placeholder="请输入物业公司名称"
            value={formData.propertyCompany}
            onChangeText={(value) => handleChange('propertyCompany', value)}
          />
        </View>

        <View style={styles.formRow}>
          <View style={[styles.formGroup, styles.halfWidth]}>
            <View style={styles.labelContainer}>
              <Text style={styles.label}>联系人</Text>
              {renderRequiredMark()}
            </View>
            <TextInput
              style={styles.input}
              placeholder="请输入联系人姓名"
              value={formData.contactPerson}
              onChangeText={(value) => handleChange('contactPerson', value)}
            />
          </View>
          <View style={[styles.formGroup, styles.halfWidth]}>
            <View style={styles.labelContainer}>
              <Text style={styles.label}>联系电话</Text>
              {renderRequiredMark()}
            </View>
            <TextInput
              style={styles.input}
              placeholder="请输入联系电话"
              keyboardType="phone-pad"
              value={formData.contactPhone}
              onChangeText={(value) => handleChange('contactPhone', value)}
            />
          </View>
        </View>

        <View style={styles.formGroup}>
          <Text style={styles.label}>备注信息</Text>
          <TextInput
            style={[styles.input, styles.textArea]}
            placeholder="请输入备注信息"
            multiline
            numberOfLines={4}
            value={formData.notes}
            onChangeText={(value) => handleChange('notes', value)}
          />
        </View>

        <TouchableOpacity style={styles.submitButton} onPress={handleSubmit}>
          <Text style={styles.submitButtonText}>提交信息</Text>
        </TouchableOpacity>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: theme.colors.background.default,
  },
  header: {
    backgroundColor: theme.colors.primary,
    paddingTop: Platform.OS === 'ios' ? 50 : 20,
    paddingBottom: 15,
    paddingHorizontal: 15,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  backButton: {
    padding: 5,
  },
  headerTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: theme.colors.white,
  },
  placeholder: {
    width: 24,
  },
  formContainer: {
    padding: 16,
  },
  formGroup: {
    marginBottom: 16,
  },
  formRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 16,
  },
  halfWidth: {
    width: '48%',
  },
  labelContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 8,
  },
  label: {
    fontSize: 16,
    fontWeight: '500',
    color: theme.colors.text.primary,
  },
  requiredMark: {
    color: theme.colors.status.pending,
    marginLeft: 4,
    fontSize: 14,
  },
  input: {
    backgroundColor: theme.colors.white,
    borderWidth: 1,
    borderColor: theme.colors.border.default,
    borderRadius: 8,
    padding: 12,
    fontSize: 16,
    color: theme.colors.text.primary,
  },
  textArea: {
    height: 100,
    textAlignVertical: 'top',
  },
  typeContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginTop: 8,
  },
  typeButton: {
    backgroundColor: theme.colors.white,
    borderWidth: 1,
    borderColor: theme.colors.border.default,
    borderRadius: 20,
    paddingVertical: 8,
    paddingHorizontal: 16,
    marginRight: 10,
    marginBottom: 10,
  },
  typeButtonActive: {
    backgroundColor: theme.colors.primary,
    borderColor: theme.colors.primary,
  },
  typeButtonText: {
    color: theme.colors.text.primary,
  },
  typeButtonTextActive: {
    color: theme.colors.white,
  },
  submitButton: {
    backgroundColor: theme.colors.primary,
    borderRadius: 8,
    padding: 16,
    alignItems: 'center',
    marginTop: 16,
  },
  submitButtonText: {
    color: theme.colors.white,
    fontSize: 16,
    fontWeight: '600',
  },
});